@import "~video-react/styles/scss/video-react.scss";

.vs-main{
  display: flex;
  align-items: flex-start;
  padding-top: 10px;
  box-sizing: border-box;
  width: 1200px;
  margin: auto;
  
  .m-srt{
    .tip{
      padding: 10px;
      box-sizing: border-box;
      background-color: white;
      border-bottom: 1px solid #eee;
      .t-start-time{
        display: flex;
        align-items: center;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
        span{
          width: 120px;

        }
        .ant-input{
          width: 200px;
          cursor: pointer;
        }
      }
      .t-cont{
        margin-top: 10px;
        font-size: 12px;
        span{
          background-color: yellow;
          margin-right: 10px;
          user-select: none;
          padding: 2px 5px;
        }
      }
    } 
    .srt-auth{
      margin-top:10px;
      .srt-a-item{
        padding:10px;
        display: flex;
        align-items: center;
        background: white;
        span{
          display: inline-block;
          width: 70px;
        }
        .ant-input{
          width: 200px;
        }
      }
    }
    .srt-content{
      background: white;
      box-sizing: border-box;
      height: 660px;
      overflow-y: scroll;
      margin-top: 10px;
      .srt-item{
        padding:10px;
        display: flex;
        align-items: center;
        height: 60px;
        overflow: hidden;
        border-bottom: 1px solid #eee;
        &.active{
          background-color: plum;
        }
        .rows{
          width: 40px;
          text-align: center;
          background-color: cornflowerblue;
          cursor: pointer;
          flex-shrink: 0;
        }
        .time{
          width: 80px;
          flex-shrink: 0;
          text-align: left;
          margin-left: 20px;
          .editCont{
            span{
              user-select: none;
            }
            .ant-input{
              padding: 5px;
            }
            
          }
          
        }
        .cont{
          width: 100%;
          margin-left: 20px;
          .editCont2{
            span{
              user-select: none;
            }
            .ant-input{
              width: 100%;
            }
          }
        }
        .operation{
          width: 100px;
          text-align: center;
          
          .ant-btn-text{
            color: blue;
          }
        }
      }
    }
    // .footer{
    //   margin-top: 10px;
    //   height: 50px;
    //   line-height: 50px;
    //   background-color: white;
    //   text-align: center;
    // }
    
  }
  .m-video{
    width: 480px;
    margin-left: 10px;
    flex-shrink: 0;
    .m-video-inner{
      width: 100%;
      background-color: white;
      padding:10px;
      flex-shrink: 0;
      .video-react-current-time,.video-react-time-divider,.video-react-duration{
        display: none;
      }
      .video-react-slider-vertical{
        .video-react-volume-level{
          &::before{
            left:-0.5em;
          }
        }
        
      }
      .video-react-play-progress{
        &::before{
          top:-0.5em;
        }
      }
      // .video-react-big-play-button-center{
      //   display: none;
      // }
    }
    .m-v-tools{
      width: 100%;
      margin-top: 10px;
      background: white;
      padding:10px;
      box-sizing: border-box;
      .srt-header{
        .tools{
          height: 30px; 
          display: flex;
          align-items: center;
          // justify-content: space-between;
          margin-bottom: 10px;
          .ant-btn{
            margin: 0px 5px;
            // margin-left: 10px;
          }
          .tools-upload-btn{
            position: relative;
          }
          .tools-upload-input{
            position: absolute;
            top:0;
            left: 0;
            opacity: 0;
          }
          .ant-btn-text{
            text-decoration: underline;
            color: blue;
          }   
        }
      }
    }
  }
  
}


.srtModal{
  .srt-m-w{
    margin-top: 10px;
    .srtModalText{
      height: 300px;
    }
  }
  
}